<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="UTF-8">
	<title>会员-充值订单</title>

	<!-- no cache -->
	<link rel="stylesheet" type="text/css" href="./css/m-reset.css">
	<link rel="stylesheet" type="text/css" href="./css/m-common.css">
	<link rel="stylesheet" type="text/css" href="./css/header.css"> <!--顶部LOGO条样式-->
	<link rel="stylesheet" type="text/css" href="./css/user-menu.css"> <!--左侧菜单样式-->
	<link rel="stylesheet" type="text/css" href="./css/custom_orderlist.css"> <!-- 右侧服务订单样式-->
</head>
<body>
<div>

	<div class="ms-header-wrapper">
		<div class="ms-header clearfix">
			<div class="fl">
				<a href="http://www.chexiang.com/" class="saic-logo">
					<img class="logo" src="./images/saic.png" alt="车享" width="110" height="40">
				</a>
				<span class="line"></span>
				<div class="dsp-ib">
					<span class="mychexiang">个人中心</span>
					<a href="#" title="返回首页" class="dsp-b">
						<span class="returnHome">返回首页</span>
					</a>
				</div>
			</div>

			<div class="fr pdr-15 mt-20">
				<ul class="clearfix">
					<li class="userName">username1234567</li>
					<li class="message"><i class="dian"></i></li>
					<li class="userFace"><img src="./images/faces10.jpg" width="32" height="32"/></li>
				</ul>
			</div>
		</div>
	</div>


</div>

<div class="w1190 mt-10 clearfix">

	<div class="member-left pdt-20">
		<dl class="user-menu">
			<dt>
			<p class="">交易中心</p></dt>
			<dd><a href="#">服务订单</a></dd>
			<dd><a href="#">整车订单</a></dd>
			<dd><a href="#">二手车订单</a></dd>
		</dl>
		<dl class="user-menu">
			<dt>
			<p>资产中心</p></dt>
			<dd><a href="#">我的积分</a></dd>
			<dd><a href="#">优惠券</a></dd>
			<dd><a href="#">车享付卡</a></dd>
		</dl>
		<dl class="user-menu">
			<dt>
			<p>帐户设置</p></dt>
			<dd><a href="#">个人信息</a></dd>
			<dd><a href="#">帐户安全</a></dd>
			<dd><a href="#">收货地址</a></dd>
			<dd><a href="#">我的爱车</a></dd>
			<dd><a href="#">我的收藏</a></dd>
			<dd><a href="#">等级权益</a></dd>
			<dd><a href="#">积分任务</a></dd>
		</dl>
		<dl class="user-menu">
			<dt>
			<p>消息中心</p></dt>
			<dd><a href="#">我的活动</a></dd>
			<dd><a href="#">消息提醒</a></dd>
		</dl>
	</div>

    <!-- 右侧开始 -->
	<div class="member-right ml-10 pd-20">
		<div class="orderlistMain">			
		    <h1 class="title">充值订单</h1>
			<div class="tab">
				<ul class="clearfix" style="position: relative;">
					<li class="fr f-12 pr dateSelect">
						<span><i data-period="0">全部</i></span>
						<span class="jiantou jiantouP2 deg90">&gt;</span>
						<div class="monthlyBySearch hide">
							<a data-period="0">全部</a>
							<br>
							<a data-period="1">一周内</a>
							<br>
							<a data-period="2">一个月内</a>
							<br>
							<a data-period="3">半年内</a>
							<br>
							<a data-period="4">半年前</a>
							<br>
						    <div></div>
						</div>
					</li>
				</ul>
			</div>

			<div class="orderlistContent mt-30">
				<table class="tableHead">
					<thead>
					<tr>
						<td width="40%" class="bdr">订单信息</td>
						<td width="15%" class="bdr">单价</td>
						<td width="6%" class="bdr">数量</td>
						<td width="14%" class="bdr">实付金额</td>
						<td width="10%" class="bdr">
							<div class="dsp-ib pdr-15 pr orderState">
								<i>全部状态</i><span class="jiantou jiantouP3 deg90">&gt;</span>
								<ul class="stateContent hide">
									<li>待发货</li>
									<li>待支付</li>
									<li>已取消</li>
									<li>已完成</li>
									<li>待评价</li>
									<li>全部状态</li>
								</ul>
							</div>
						</td>
						<td width="15%">操作</td>
					</tr>
					</thead>
				</table>

                <!-- 多个商品开始 -->
				<table class="tableContent mt-10">
					<tbody>
					<tr class="bd-ltr">
						<td colspan="6">
							<div class="pd-10 text-l bg-f6f9fa">
								订单号：<span class="pdr-15">123456789012345678</span>
								下单时间：<span class="pdr-15">2016年5月5日  12:12:12</span>
								<p class="fr djs">请在<span class="clr-orange pdlr-5">50:50</span>内支付</p>
							</div>
						</td>
					</tr>
					<tr>
						<td width="61%" class="bd-b">
							<table>
								<tr class="bd-lt">
									<td width="65.5%" class="f-16 clr-gray3 pd-30 bdr">商品商品商品商品商品商品商品</td>
									<td width="24.5%" class="clr-gray9 pdtb-30 bdr dec-through">￥200.00</td>
									<td width="10%" class="clr-gray3 pdtb-30">2</td>
								</tr>
								<tr class="bd-lt">
									<td width="65.5%" class="f-16 clr-gray3 pd-30 bdr">商品商品商品商品商品商品商品</td>
									<td width="24.5%" class="clr-gray9 pdtb-30 bdr dec-through">￥200.00</td>
									<td width="10%" class="clr-gray3 pdtb-30">2</td>
								</tr>
								<tr class="bd-lt">
									<td width="65.5%" class="f-16 clr-gray3 pd-30 bdr">商品商品商品商品商品商品商品</td>
									<td width="24.5%" class="clr-gray9 pdtb-30 bdr dec-through">￥200.00</td>
									<td width="10%" class="clr-gray3 pdtb-30">2</td>
								</tr>
							</table>
						</td>
						<td width="14%" class="f-14 clr-gray3 bd">
							<span>（套餐价）</span>
							<p class="pdt-10">￥<span>100.00</span>元</p>
							<p class="pdt-10 f-12 clr-gray9">已优惠：100.00元</p>
						</td>
						<td width="10%" class="f-14 clr-gray3 bd">
							<!--<span class="zfwc">支付完成</span>
							<span class="dpj">待评价</span>-->
							<span class="wzf clr-orange">待支付</span>
							<!--							<span class="yqx clr-gray9">已取消</span>
														<span class="ywc">已完成</span>-->
						</td>
						<td width="15%" class="bd">
							<span class="payDetail">立即支付</span><br />
							<a class="viewDetail mtb-10">查看详情</a><br />
							<span class="cancelOrder" onclick="javascript:cancelOrder('161129999999002565801')">取消订单</span>
						</td>
					</tr>
					</tbody>
				</table>
				<!-- 多个商品结束 -->

				<table class="tableContent mt-10">
					<tbody>
						<!--父订单号 -->
						<tr class="bd-ltr">
							<td colspan="6">
								<div class="pd-10 text-l bg-f6f9fa clr-gray9">
									主订单号：<span class="pdr-15">161129999999002565801</span>
									下单时间：<span class="pdr-15">2016年11月29日 11:21:19</span>
									<p class="fr djs">请在<span class="clr-orange pdlr-5">20:05:44</span>内支付</p>
								</div>
							</td>
						</tr>
						<!--子订单号-->
						<tr class="bd-ltr">
							<td colspan="6">
								<div class="pd-10 text-l clr-gray9">
									订单号：<span class="pdr-15">161129101001002565802</span>
									渠道：<span class="pdr-15">会员商城</span>
								</div>
							</td>
						</tr>
						<tr>
							<td width="61%" class="bd-b">
								<table>
									<tbody>
										<tr class="bd-lt">
											<td width="65.5%" valign="middle" class="bdr" style="padding: 20px 0;position: relative;">
											    <div class="mr-10 fl" style="width:150px;">
												    <a href="#" target="_blank">
										      		   <img src="./images/pic.jpg" alt="" style="width:100%;">
										            </a>
										        </div>
										        <div class="fl text-l" style="width: 197px;line-height: 1.3;position: absolute;right: 0; top: 50%;margin-top: -20px; height: 36px; overflow: hidden;">
											        <a href="#" target="_blank" class="f-14 clr-gray3">
										            	<p class="">追趣车中床汽车随车充气床垫135*88</p>
										            </a>
										        </div>
										    </td>
										    <td width="24.5%" class="pdtb-30 bdr " style="font-size:14px;color:rbg(51,51,51)">￥278.00</td>
										    <td width="10%" class="clr-gray3 pdtb-30 f-14">1</td>
									    </tr>
								    </tbody>
								</table>
							</td>
							<td width="14%" class="f-14 clr-gray3 bd">
								<p class="">￥278.00</p>
							</td>
							<td width="10%" class="f-14 clr-gray3 bd">
								<!--<span class="zfwc">支付完成</span>-->
								<span class="wzf clr-orange">待支付</span>
								<!--<span class="yqx clr-gray9">已取消</span>
									<span class="ywc">已完成</span>-->
							</td>
							<td width="15%" class="bd f-14">
								<span class="payDetail">立即支付</span><br />
								<a class="viewDetail mtb-10">查看详情</a><br />
								<span class="cancelOrder" onclick="javascript:cancelOrder('161129999999002565801')">取消订单</span>
							</td>
						</tr>
					</tbody>
				</table>

				<table class="tableContent mt-10">
					<tbody>
						<!--父订单号 -->
						<tr class="bd-ltr">
							<td colspan="6">
								<div class="pd-10 text-l bg-f6f9fa clr-gray9">
									主订单号：<span class="pdr-15">161129999999002565801</span>
									下单时间：<span class="pdr-15">2016年11月29日 11:21:19</span>
									<p class="fr djs">请在<span class="clr-orange pdlr-5">20:05:44</span>内支付</p>
								</div>
							</td>
						</tr>
						<!--子订单号-->
						<tr class="bd-ltr">
							<td colspan="6">
								<div class="pd-10 text-l clr-gray9">
									订单号：<span class="pdr-15">161129101001002565802</span>
									渠道：<span class="pdr-15">会员商城</span>
								</div>
							</td>
						</tr>
						<tr>
							<td width="61%" class="bd-b">
								<table>
									<tbody>
										<tr class="bd-lt">
											<td width="65.5%" valign="middle" class="bdr" style="padding: 20px 0;position: relative;">
											    <div class="mr-10 fl" style="width:150px;">
												    <a href="#" target="_blank">
										      		   <img src="./images/pic.jpg" alt="" style="width:100%;">
										            </a>
										        </div>
										        <div class="fl text-l" style="width: 197px;line-height: 1.3;position: absolute;right: 0; top: 50%;margin-top: -20px; height: 36px; overflow: hidden;">
											        <a href="#" target="_blank" class="f-14 clr-gray3">
										            	<p class="">追趣车中床汽车随车充气床垫135*88</p>
										            </a>
										        </div>
										    </td>
										    <td width="24.5%" class="pdtb-30 bdr " style="font-size:14px;color:rbg(51,51,51)">￥278.00</td>
										    <td width="10%" class="clr-gray3 pdtb-30 f-14">1</td>
									    </tr>
								    </tbody>
								</table>
							</td>
							<td width="14%" class="f-14 clr-gray3 bd">
								<p class="">￥278.00</p>
							</td>
							<td width="10%" class="f-14 clr-gray3 bd">
								<!--<span class="zfwc">支付完成</span>-->
								<span class="wzf clr-orange">待支付</span>
								<!--<span class="yqx clr-gray9">已取消</span>
									<span class="ywc">已完成</span>-->
							</td>
							<td width="15%" class="bd f-14">
								<span class="payDetail">立即支付</span><br />
								<a class="viewDetail mtb-10">查看详情</a><br />
								<span class="cancelOrder" onclick="javascript:cancelOrder('161129999999002565801')">取消订单</span>
							</td>
						</tr>
					</tbody>
				</table>

				<table class="tableContent mt-10">
					<tbody>
						<!--父订单号 -->
						<tr class="bd-ltr">
							<td colspan="6">
								<div class="pd-10 text-l bg-f6f9fa clr-gray9">
									主订单号：<span class="pdr-15">161129999999002565801</span>
									下单时间：<span class="pdr-15">2016年11月29日 11:21:19</span>
									<p class="fr djs">请在<span class="clr-orange pdlr-5">20:05:44</span>内支付</p>
								</div>
							</td>
						</tr>
						<!--子订单号-->
						<tr class="bd-ltr">
							<td colspan="6">
								<div class="pd-10 text-l clr-gray9">
									订单号：<span class="pdr-15">161129101001002565802</span>
									渠道：<span class="pdr-15">会员商城</span>
								</div>
							</td>
						</tr>
						<tr>
							<td width="61%" class="bd-b">
								<table>
									<tbody>
										<tr class="bd-lt">
											<td width="65.5%" valign="middle" class="bdr" style="padding: 20px 0;position: relative;">
											    <div class="mr-10 fl" style="width:150px;">
												    <a href="#" target="_blank">
										      		   <img src="./images/pic.jpg" alt="" style="width:100%;">
										            </a>
										        </div>
										        <div class="fl text-l" style="width: 197px;line-height: 1.3;position: absolute;right: 0; top: 50%;margin-top: -20px; height: 36px; overflow: hidden;">
											        <a href="#" target="_blank" class="f-14 clr-gray3">
										            	<p class="">追趣车中床汽车随车充气床垫135*88</p>
										            </a>
										        </div>
										    </td>
										    <td width="24.5%" class="pdtb-30 bdr " style="font-size:14px;color:rbg(51,51,51)">￥278.00</td>
										    <td width="10%" class="clr-gray3 pdtb-30 f-14">1</td>
									    </tr>
								    </tbody>
								</table>
							</td>
							<td width="14%" class="f-14 clr-gray3 bd">
								<p class="">￥278.00</p>
							</td>
							<td width="10%" class="f-14 clr-gray3 bd">
								<!--<span class="zfwc">支付完成</span>-->
								<span class="wzf clr-orange">待支付</span>
								<!--<span class="yqx clr-gray9">已取消</span>
									<span class="ywc">已完成</span>-->
							</td>
							<td width="15%" class="bd f-14">
								<span class="payDetail">立即支付</span><br />
								<a class="viewDetail mtb-10">查看详情</a><br />
								<span class="cancelOrder" onclick="javascript:cancelOrder('161129999999002565801')">取消订单</span>
							</td>
						</tr>
					</tbody>
				</table>

			</div>

            <!-- 分页 -->
 
	        <div class="s_pageBox">
				<a href="javascript:void(0);">&lt;</a>			
				<a class="s_pageCurrent" href="javascript:void(0);">1</a>
				<a href="javascript:void(0);">2</a>
				<a href="javascript:void(0);" >3</a>
				<a href="javascript:void(0);" >4</a>
				<a href="javascript:void(0);" >5</a>
				<a class="s_light" href="javascript:void(0);" >&gt;</a>
		    </div>
            <!-- 分页 -->
		</div>

	</div>
    <!-- 右侧结束 -->
</div>
<script type="text/javascript" src="js/jquery_1_8_3.min.js"></script>
<script type="text/javascript" src="js/ECar.dialog.min.js"></script>
<script type="text/javascript">
	$('.orderState').on('click',function(){
		var flag = $('.stateContent').hasClass('hide');
		if(flag){
			$('.stateContent').removeClass('hide');
		} else {
			$('.stateContent').addClass('hide');
		}
		return false;
	});

	$('.stateContent li').on('click',function(){
		var state = $(this).text();
		$('.orderState i').text(state);
	});

	// $('.cfw').on('click',function(){
	// 	var flag = $('.cfwOrder').hasClass('hide');
	// 	if(flag){
	// 		$('.cfwOrder').removeClass('hide');
	// 	} else {
	// 		$('.cfwOrder').addClass('hide');
	// 	}
	// });

     $('.cancelOrder').live('click', function(){});	
	   function cancelOrder(orderCode){
	
		_orderCode = orderCode;
		ECar.dialog.confirm('订单取消后将无法恢复，确定取消该订单吗？');		
	};
    
	$('.dateSelect').on('click',function(){
		var flag = $('.monthlyBySearch').hasClass('hide');
		if(flag){
			$('.monthlyBySearch').removeClass('hide');
		} else {
			$('.monthlyBySearch').addClass('hide');
		}
		return false;
	});

	$(".monthlyBySearch a").on('click',function(){
		var periodStatus = $(this).attr("data-period");
		var periodName = $(this).text();
		var orderStatus = $(".orderState i").attr("data-statu");
		var orderStatusName = $(".orderState i").text();
		window.location.href = "/member/beautyLife.htm?orderStatus="+orderStatus+"&orderStatusName="+orderStatusName
		+"&periodStatus="+periodStatus+"&periodName="+periodName;
	});




</script>

</body>
</html>